import { FC } from "react";

// 对于多行的className，我们通过使用classnames包来处理
import classNames from "classnames";

import { List } from "./List";
import { GarbageBin } from "./GarbageBin";
import { NewItem } from "./NewItem";

interface TodoListProps {

}

export const TodoList: FC<TodoListProps> = (props) => {


    return <div className={classNames(
        "w-1000 h-600 mt-100 m-auto p-10",
        "border-2 border-black",
        "flex justify-between items-start"
    )}>
        <div className="flex-2 h-full mr-10 overflow-auto">
            <List></List>
        </div>
        <div className={classNames(
            "flex-1 h-full",
            "flex flex-col justify-start"
        )}>
            <NewItem></NewItem>
            <GarbageBin></GarbageBin>
        </div>
    </div>
}